<template>
    <div class="n1">
        <div style="padding: 20px;margin-bottom: 10%">
            <el-form :model="data" :rules="mRules" ref="form" label-width="150px">
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>企业信息</span>
                    </div>
                    <div class="n2">
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业名称：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.name | nullFilter}}</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业类型：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">
                                    <span v-if="!companyInfo.unitType">暂无数据</span>
                                    <el-tag type='info' v-else class="rit5" v-for="tag in split(companyInfo.unitType)">
                                        {{tag}}
                                    </el-tag>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业地址：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.address | nullFilter}}
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业规模：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.companyScale | nullFilter}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">联系人1：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.contactPeople1 |
                                    nullFilter}}
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">联系人2：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.contactPeople2 |
                                    nullFilter}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">联系人1手机：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.phone | nullFilter}}</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">联系人2手机：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.phone2 | nullFilter}}
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card shadow="never">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="数据所属月份：" prop="dataMonth">
                                <el-date-picker
                                        style="width: 70%"
                                        v-model="data.dataMonth"
                                        type="month"
                                        value-format="yyyy-MM"
                                        @blur="this.dateChange"
                                        placeholder="选择月">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item style="width: 90%" label="在职员工总数：" prop="inWorkPeopleCount">
                                <el-input-number :step="1" :min="0" v-model="data.inWorkPeopleCount"
                                                 placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>

                <el-card shadow="hover" style="margin-top: 5px">
                    <div slot="header" class="clearfix">
                        <span>岗位类型：</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="6" v-for="jobType in jobTypeList">
                                <el-form-item :label="jobType+':'" :prop="'jobType.'+ jobType">
                                    <el-input-number :step="1" :min="0" v-model="data.jobType[jobType]"
                                                     placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="color: red;" v-if="jobTypeErr">
                            <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                 src="@/assets/image/admin/tan_hao.png"/>
                            岗位类型人数之和，应该等于在职员工总数
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="margin-top: 5px">
                    <div slot="header" class="clearfix">
                        <span>人员类型：</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="6" v-for="peopleType in peopleTypeList">
                                <el-form-item :label="peopleType+':'" :prop="'peopleType.' + peopleType">
                                    <el-input-number :step="1" :min="0" v-model="data.peopleType[peopleType]"
                                                     placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="color: red;" v-if="peopleTypeErr">
                            <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                 src="@/assets/image/admin/tan_hao.png"/>
                            人员类型人数之和，应该等于在职员工总数
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="margin-top: 5px">
                    <div slot="header" class="clearfix">
                        <span>学历：</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="6" v-for="learnLevel in learnLevelList">
                                <el-form-item :label="learnLevel+':'" :prop="'learnLevel.' + learnLevel">
                                    <el-input-number :step="1" :min="0" v-model="data.learnLevel[learnLevel]"
                                                     placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="color: red;" v-if="learnLevelErr">
                            <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                 src="@/assets/image/admin/tan_hao.png"/>
                            学历人数之和，应该等于在职员工总数
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="margin-top: 5px">
                    <div slot="header" class="clearfix">
                        <span>性别：</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item :label="'男:'" :prop="'sex.男'">
                                    <el-input-number :step="1" :min="0" v-model="data.sex['男']" placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item :label="'女:'" :prop="'sex.女'">
                                    <el-input-number :step="1" :min="0" v-model="data.sex['女']" placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="color: red;" v-if="sexErr">
                            <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                 src="@/assets/image/admin/tan_hao.png"/>
                            性别人数之和，应该等于在职员工总数
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="margin-top: 5px">
                    <div slot="header" class="clearfix">
                        <span>年龄段：</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="6" v-for="peopleAge in peopleAgeList">
                                <el-form-item :label="peopleAge+':'" :prop="'peopleAge.' + peopleAge">
                                    <el-input-number :step="1" :min="0" v-model="data.peopleAge[peopleAge]"
                                                     placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="color: red;" v-if="peopleAgeErr">
                            <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                 src="@/assets/image/admin/tan_hao.png"/>
                            年龄段人数之和，应该等于在职员工总数
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="margin-top: 5px">
                    <div slot="header" class="clearfix">
                        <span>政治面貌：</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="6" v-for="politicsFace in politicsFaceList">
                                <el-form-item :label="politicsFace+':'" :prop="'politicsFace.' + politicsFace">
                                    <el-input-number :step="1" :min="0" v-model="data.politicsFace[politicsFace]"
                                                     placeholder="暂无数据"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="color: red;" v-if="politicsFaceErr">
                            <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                 src="@/assets/image/admin/tan_hao.png"/>
                            政治面貌人数之和，应该等于在职员工总数
                        </div>
                    </div>
                </el-card>
            </el-form>
        </div>
        <div class="toolbar-bottom-right">
            <el-button class="button" @click="cancel()" size="medium">取消</el-button>
            <el-button type="primary" class="button" size="medium" @click="insert()">提交</el-button>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Emit} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {getStorage, getUserInfo} from "@/core/utils/storage";
    import {verdictDate} from "@/core/utils/validate";
    import {copy} from "@/core/utils/Utils";

    @Component({
        name: 'InWorkHumanInfo',
        components: {},
    })
    export default class InWorkHumanInfo extends mixins(BaseVue, Kit) {

        data: any = {
            dataMonth: new Date(),
            jobType: {},
            peopleType: {},
            learnLevel: {},
            sex: {},
            peopleAge: {},
            politicsFace: {}
        };

        companyInfo: any = {};

        jobTypeList: any = [];
        peopleTypeList: any = [];
        learnLevelList: any = [];
        peopleAgeList: any = [];
        politicsFaceList: any = [];

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        // 错误提示显示状态
        jobTypeErr: boolean = false;
        peopleTypeErr: boolean = false;
        learnLevelErr: boolean = false;
        sexErr: boolean = false;
        peopleAgeErr: boolean = false;
        politicsFaceErr: boolean = false;
        mRules: any = {
            dataMonth: [rule.notNullBlur()],
            inWorkPeopleCount: [rule.notNullBlur()],
            'sex.男': [rule.notNullBlur(), rule.length(1, 5)],
            'sex.女': [rule.notNullBlur(), rule.length(1, 5)],
        };

        //检查在职员工数
        checkAllPeopleCount(): any {
            let data = copy(this.data);
            let error = false;
            //
            if (data.politicsFace['中国共产党党员'] * 1 + data.politicsFace['其它'] * 1 != data.inWorkPeopleCount) {
                error = true;
                this.politicsFaceErr = true;
            } else {
                this.politicsFaceErr = false;
            }
            //
            if (data.peopleAge['16-24周岁'] * 1 + data.peopleAge['25-30周岁'] * 1 + data.peopleAge['31-35周岁'] * 1
                + data.peopleAge['35-45周岁'] * 1 + data.peopleAge['45-55周岁'] * 1 + data.peopleAge['55-60周岁'] * 1
                + data.peopleAge['60周岁以上'] * 1 != data.inWorkPeopleCount) {
                error = true;
                this.peopleAgeErr = true;
            } else {
                this.peopleAgeErr = false;
            }
            //
            if (data.sex['女'] * 1 + data.sex['男'] * 1 != data.inWorkPeopleCount) {
                error = true;
                this.sexErr = true;
            } else {
                this.sexErr = false;
            }
            //
            if (data.learnLevel['中专（高中）'] * 1 + data.learnLevel['初中及以下'] * 1
                + data.learnLevel['博士'] * 1 + data.learnLevel['大专'] * 1
                + data.learnLevel['本科'] * 1 + data.learnLevel['研究生'] * 1 != data.inWorkPeopleCount) {
                error = true;
                this.learnLevelErr = true;
            } else {
                this.learnLevelErr = false;
            }
            //
            if (data.peopleType['被征地农民'] * 1 + data.peopleType['应届高校毕业生'] * 1 + data.peopleType['有经验的工作人员'] * 1 != data.inWorkPeopleCount) {
                error = true;
                this.peopleTypeErr = true;
            } else {
                this.peopleTypeErr = false;
            }
            //
            if (data.jobType['技术岗'] * 1 + data.jobType['普通岗'] * 1 + data.jobType['管理岗'] * 1 != data.inWorkPeopleCount) {
                error = true;
                this.jobTypeErr = true;
            } else {
                this.jobTypeErr = false;
            }

            //存在异常信息
            return !error;

        }

        //初始化
        async mounted() {
            // 查询用户企业
            $http.post(API.companyInfoByUserId, {id: getUserInfo().id}).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    this.companyInfo = res.data;
                    this.data.companyId = res.data.id;
                    this.dateChange();
                } else {
                    errorMsg("操作失败");
                }
            });
            let date = new Date();
            let month = date.getMonth() + 1;
            let mm: string;
            if (month < 10) {
                mm = "0" + month;
            } else {
                mm = month.toString();
            }
            this.data.dataMonth = date.getFullYear() + "-" + mm;
            this.jobTypeList = getStorage("jobType");
            this.peopleTypeList = getStorage("peopleType");
            this.learnLevelList = getStorage("learnLevel");
            this.peopleAgeList = getStorage("peopleAge");
            this.politicsFaceList = getStorage("politicsFace");
            // 设置校验规则
            for (let i in this.jobTypeList) {
                this.mRules['jobType.' + this.jobTypeList[i]] = [rule.notNullBlur(), rule.length(1, 5)]
            }
            for (let i in this.peopleTypeList) {
                this.mRules['peopleType.' + this.peopleTypeList[i]] = [rule.notNullBlur(), rule.length(1, 5)]
            }
            for (let i in this.learnLevelList) {
                this.mRules['learnLevel.' + this.learnLevelList[i]] = [rule.notNullBlur(), rule.length(1, 5)]
            }
            for (let i in this.peopleAgeList) {
                this.mRules['peopleAge.' + this.peopleAgeList[i]] = [rule.notNullBlur(), rule.length(1, 5)]
            }
            for (let i in this.politicsFaceList) {
                this.mRules['politicsFace.' + this.politicsFaceList[i]] = [rule.notNullBlur(), rule.length(1, 5)]
            }
        }

        cancel() {
            // 查询用户企业
            $http.post(API.companyInfoByUserId, {id: getUserInfo().id}).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    this.companyInfo = res.data;
                    this.data.companyId = res.data.id;
                    this.dateChange();
                } else {
                    errorMsg("操作失败");
                }
            });
            let date = new Date();
            let month = date.getMonth() + 1;
            let mm: string;
            if (month < 10) {
                mm = "0" + month;
            } else {
                mm = month.toString();
            }
            this.data.dataMonth = date.getFullYear() + "-" + mm;
        }

        dateChange() {
            if (!this.data.dataMonth) {
                return;
            }
            if (!verdictDate(this.data.dataMonth)) {
                this.data.dataMonth += "-01";
            }
            $http.post(API.inWorkHumanInfoByMonth, {
                dataMonth: this.data.dataMonth,
                companyId: this.data.companyId
            }).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    if (res.data) {
                        this.data = res.data;
                        this.data.jobType = JSON.parse(this.data.jobType);
                        this.data.peopleType = JSON.parse(this.data.peopleType);
                        this.data.learnLevel = JSON.parse(this.data.learnLevel);
                        this.data.sex = JSON.parse(this.data.sex);
                        this.data.peopleAge = JSON.parse(this.data.peopleAge);
                        this.data.politicsFace = JSON.parse(this.data.politicsFace);
                        this.$alert('当前选中月份存在数据,重复填写提交,会覆盖原有数据。', '提示', {
                            confirmButtonText: '确定',
                            type: 'warning'
                        });
                    } else {
                        this.data = {
                            dataMonth: this.data.dataMonth,
                            companyId: this.companyInfo.id,
                            jobType: this.data.jobType,
                            peopleType: this.data.peopleType,
                            learnLevel: this.data.learnLevel,
                            sex: this.data.sex,
                            peopleAge: this.data.peopleAge,
                            politicsFace: this.data.politicsFace
                        }
                    }
                } else {
                    errorMsg("操作失败");
                }
            });
        }

        //添加用户
        insert() {
            (this.$refs.form as ElForm).validate().then(() => {
                //校验人数正确性
                if (!this.checkAllPeopleCount()) return;

                if (!verdictDate(this.data.dataMonth)) {
                    this.data.dataMonth += "-01";
                }
                let data = copy(this.data);
                data.jobType = JSON.stringify(data.jobType);
                data.peopleType = JSON.stringify(data.peopleType);
                data.learnLevel = JSON.stringify(data.learnLevel);
                data.sex = JSON.stringify(data.sex);
                data.peopleAge = JSON.stringify(data.peopleAge);
                data.politicsFace = JSON.stringify(data.politicsFace);
                $http.post(API.inWorkHumanInfoInsert, data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("员工基本情况信息保存成功", 4000);
                        this.go("DynamicHumanInfo")
                    } else {
                        errorMsg("操作失败");
                    }
                });
            }).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //关闭事件
        @Emit("close")
        close() {
            return {refresh: this.backRefresh};
        }
    }


</script>

<style scoped lang="scss">
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .info {
        color: #909399;
    }
</style>
